<template>
    <div class="box-view screen-all flex">
        异步
        <div class="flex row wrap">
            <el-progress type="circle" :percentage="progress1" />
            <el-progress type="circle" :percentage="progress2" />
            <el-progress type="circle" :percentage="progress3" />
            <!-- <el-progress type="circle" :percentage="100" status="success" />
            <el-progress type="circle" :percentage="70" status="warning" />
            <el-progress type="circle" :percentage="50" status="exception" /> -->
        </div>

        <div class="flex row">
            <el-button style="width: 100px;" @click="onReset">重置</el-button>
            <el-button style="width: 100px;" @click="onClick">开始</el-button>
        </div>
    </div>
</template>

<script lang="ts">
import { ref, Ref, reactive, toRefs, onMounted, defineComponent } from 'vue';

export default defineComponent({
    components: {
        
    },

    setup () {
        const progress1 = ref(0);
        const progress2 = ref(0);
        const progress3 = ref(0);

        const data = reactive({
            
        })

        

        const post = (url: string, params: any): Promise<any> => {
            console.log(url, params);
            return new Promise((resolve, reject)=>{
                setTimeout(() => {
                    resolve({ status: 1, msg: 'success', data: { id: 4, name: '钟离', age: 22 } });
                }, 500);
            });
        }

        const runAsync1 = () => {
            return new Promise((resolve, reject) => {

            })
        }


        /**
         * 基础上传
         */
        const upload = (): Promise<any> => {
            return new Promise((resolve, reject) => {
                let _timer = setInterval(() => {
                    progress1.value += 10;
                    if(progress1.value >= 100){
                        resolve({ status: 1, msg: '上传成功', data: {} });
                        _timer && clearInterval(_timer);
                    }
                }, 200);
            })
        }

        /**
         * 同步和顺序上传
         */
        const upload1 = (): Promise<any> => {
            return new Promise((resolve, reject) => {
                let _timer = setInterval(() => {
                    progress1.value += 10;
                    if(progress1.value >= 100){
                        resolve({ status: 1, msg: '上传成功', data: {} });
                        _timer && clearInterval(_timer);
                    }
                }, 200);
            })
        }
        const upload2 = (): Promise<any> => {
            return new Promise((resolve, reject) => {
                let _timer = setInterval(() => {
                    progress2.value += 10;
                    if(progress2.value >= 100){
                        resolve({ status: 1, msg: '上传成功', data: {} });
                        _timer && clearInterval(_timer);
                    }
                }, 300);
            })
        }
        const upload3 = (): Promise<any> => {
            return new Promise((resolve, reject) => {
                let _timer = setInterval(() => {
                    progress3.value += 10;
                    if(progress3.value >= 100){
                        resolve({ status: 1, msg: '上传成功', data: {} });
                        _timer && clearInterval(_timer);
                    }
                }, 250);
            })
        }

        const onReset = () => {
            progress1.value = 0;
            progress2.value = 0;
            progress3.value = 0;
        }

        const onClick = async () => {

            // 基础部分
            // upload().then(({ status, msg, data }) => {
            //     console.log(status, msg, data);
            // })

            // let res = await upload();
            // console.log(res);

            // 同步执行
            // upload1();
            // upload2();
            // upload3();

            // 顺序执行
            upload1()
                .then((res) => {
                    return upload2();
                })
                .then((res) => {
                    return upload3();
                })
                .then((res) => {

                })

            await upload1().catch(() => {});
            // await upload2();
            // await upload3();

            

        }

        onMounted(() => {
            
        })

        return {
            progress1,
            progress2,
            progress3,
            onReset,
            onClick,
            ...toRefs(data),
        }
    },
});
</script>
<style lang="scss" scoped>
    .box-view {
        background-color: white;
        font-size: 20px;
        color: #121212;
    }
</style>
